<template>
  <div>
    <div class="detail">
      <Swipe :bannerArr="gallery"></Swipe>
      <!-- 退款 -->
      <van-row>
        <van-col span="8"
          ><i
            class="van-icon van-icon-passed"
            style="transform: translate(-0.02rem, 0.02rem); color: darkred"
          ></i
          >三十天无忧退货</van-col
        >
        <van-col span="8"
          ><i
            class="van-icon van-icon-passed"
            style="transform: translate(-0.02rem, 0.02rem); color: darkred"
          ></i
          >48小时快速退费</van-col
        >
        <van-col span="8"
          ><i
            class="van-icon van-icon-passed"
            style="transform: translate(-0.02rem, 0.02rem); color: darkred"
          ></i
          >88元包邮到家</van-col
        >
      </van-row>
      <!-- 商品基础信息 -->
      <div class="info">
        <h3>{{ info.name }}</h3>
        <p>{{ info.goods_brief }}</p>
        <div>{{ info.retail_price | RMBformat }}</div>
      </div>
      <!-- 商品信息 -->
      <div class="attribute">
        <h3>商品参数</h3>
        <ul>
          <li v-for="(item, index) in attribute" :key="index">
            <b>{{ item.name }}:</b>
            <span>{{ item.value }}</span>
          </li>
        </ul>
      </div>
      <!-- 商品详情 -->
      <div class="product">
        <span>产品详情</span>
      </div>
      <!-- 详情大图 -->
      <div class="goods" v-html="info.goods_desc"></div>
     <!-- 常见的问题 -->
     <div class="question">
      <span>--常见问题--</span>
    </div>
    <ul class="issue">
      <li v-for="item in issue" :key="item.id">
        <span>{{ item.question }}</span>
        <p>{{ item.answer }}</p>
      </li>
    </ul>
      <!-- 底部 -->
      <van-goods-action>
        <van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
        <van-goods-action-icon
          icon="cart-o"
          text="购物车"
          :badge="badge"
          @click="$router.push('/car')"
        />
        <van-goods-action-button
          type="warning"
          text="加入购物车"
          @click="addCarMaskFn"
        />
        <van-goods-action-button type="danger" text="立即购买" />
      </van-goods-action>
      <!--底部弹窗-->
      <van-sku
        v-model="show"
        :sku="sku"
        :goods="goods"
        :goods-id="goodsId"
        :hide-stock="sku.hide_stock"
        @buy-clicked="onBuyClicked"
        @add-cart="onAddCartClicked"
        ref="myref"
      />
    </div>
  </div>
</template>

<script>
//轮播图
import Swipe from "@/components/Swipe.vue";
//请求引入
import { getDetail, addCarData, getGoodsCount } from "@/utils/http";
export default {
  name: "",
  props: [""],
  data() {
    return {
        issue:[],//常见问题集合
      attribute: [],//参数信息
      info: {}, // 商品信息
      gallery: [], // 轮播图数据
      show: false, // 面板
      goods: {
        picture: "", // 弹出的商品展示面板上当前商品的的缩略图
      }, //当前商品信息对象
      goodsId: "", // 当前商品的id
      sku: {
        // 商品数据
        tree: [],
        price: "1.00",
        stock_num: 227, // 商品总库存
        hide_stock: false, // 剩余库存
      },
      id: "", // 产品id，来自productList的第一个数组项中的id
      badge: 0, // 商品数量
    };
  },

  components: {
    Swipe,
  },

  computed: {},

  created() {
    // console.log(this.$route.query);
    getDetail(this.$route.query).then((res) => {
    //   console.log(res);
      //商品信息
      this.issue=res.data.issue
      this.attribute = res.data.attribute;
      this.info = res.data.info;
      this.gallery = res.data.gallery;
      this.gallery = this.gallery.map((item) => {
        item.image_url = item.img_url;
        return item;
      });
      // 给当前组件上的数据分别赋值
      this.goods.picture = res.data.info.list_pic_url;
      this.sku.price = res.data.info.retail_price;
      this.sku.stock_num = res.data.info.goods_number;
      this.goodsId = res.data.info.id;
      this.id = res.data.productList[0].id;
    });

    // 获取当前购物车的总的商品数量
    getGoodsCount().then((res) => {
      this.badge = res.data.cartTotal.goodsCount;
    });
  },
  methods: {
    addCarMaskFn() {
      // 点击加入购物车弹窗弹出来了
      this.show = true;
    },
    onBuyClicked() {
      // 点击购买
    //   console.log("点击了购买加入购物车咯");
    },
    onAddCartClicked() {
      // 点击加入购物车
      console.log("点击加入购物车了");
      // 获取当前商品组件实例该对象中getSkuData 可以获取商品的数量
      // console.log(this.$refs.myref.getSkuData());
      addCarData({
        goodsId: this.goodsId,
        productId: this.id,
        number: this.$refs.myref.getSkuData().selectedNum,
      }).then((res) => {
        // console.log(res);
        if (res.errno == 0) {
          // 添加购物车判断
          //   console.log(this);
          // 隐藏面板
          this.show = false;
          // 获取当前的商品的总数量并赋值给badge
          this.badge = res.data.cartTotal.goodsCount;
          this.$toast({
            type: "success",
            message: "已加入购物车咯",
            duration: 1000,
          });
        } else {
          // 加入失败
          this.$toast({
            type: "fail",
            message: "哎~添加失败",
            duration: 1000,
          });
        }
      });
    },
  },
};
</script>
<style lang='less' scoped>
.detail {
  /deep/.van-swipe {
    height: 280px;
  }
  .van-row {
    font-size: 14px;
    margin-top: 5px;
    font-weight: 600;
  }
  .info {
    text-align: center;
    line-height: 20px;
    font-size: 16px;
    margin-top: 5px;
    p {
      color: gray;
    }
    div {
      color: darkred;
    }
  }
  .attribute {
    // text-align: center;
    font-size: 16px;
    margin-top: 12px;
    h3 {
      text-align: center;
      margin-bottom: 10px;
      font-weight: 700;
    }
    ul {
      width: 350px;
      height: 120px;
      // background: red;
      margin: 0 auto;
      li {
        background-color: rgb(255, 245, 230);
        margin-bottom: 5px;
        border-radius: 5px;
        b {
          text-align: left;
          font-weight: 600;
        }
        span {
          text-align: right;
        }
      }
    }
  }
  .product {
    text-align: center;
    margin-bottom: 10px;
    font-weight: 700;
    margin-top: 15px;
    font-size: 16px;
  }
/deep/.goods {
    img {
      max-width: 100%;
      display: block;
    }
  }
  .question{
     text-align: center;
    margin-bottom: 15px;
    font-weight: 700;
    margin-top: 15px;
    font-size: 16px;
  }
  .issue{
    
       li{
            list-style-type: disc;
            font-size: 14px;
            margin-bottom: 10px;
            span{
                font-weight: bold;
                margin-bottom: 3px;
            }
       } 
    
  }
}
</style>